import { useEffect, useMemo } from "react"
import Svg from "@/components/base/Svg"
import { LoginOtpForm } from "../data"
import { css } from "@emotion/react"
import { motion } from "motion/react"
import { Link, useMatch } from "react-router-dom"
import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import TermsPage from "@/pages/MandatoryPage/subPages/TermsPage"
import PrivacyPolicyPage from "@/pages/MandatoryPage/subPages/PrivacyPolicyPage"
import { LoginAgreeValueAtom } from "@/pages/UserCenterPage/atom"
import { useAtom } from "jotai"
import { PATHS } from "@/constants/path"

const HintLink = styled(Link)`
    color: #ff356b;
    font-family: Gilroy;
    font-weight: 500;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
`

export default function AgreeHint({ formUrl }: { formUrl: string }) {
    const form = LoginOtpForm.useFormContext()
    const { open, close } = useModalSlideUp()
    const [AgreeValue, setAgreeValue] = useAtom(LoginAgreeValueAtom)
    const match_LOGIN = useMatch(PATHS.LOGIN)

    const handleClick = () => {
        const current = form.getValues("agreeTerms")
        setAgreeValue({ value: !current, changeType: "MandatoryPage" })
        form.setValue("agreeTerms", !current)
        form.trigger("agreeTerms")
        form.clearErrors("agreeTerms")
    }

    useEffect(() => {
        form.setValue("agreeTerms", AgreeValue.value)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [AgreeValue.value])

    const checked = form.watch("agreeTerms")

    const agreeTermsHintShow = useMemo(() => {
        return !checked && form.formState.isSubmitted
    }, [checked, form.formState.isSubmitted])

    const goTerms = async () => {
        await close()
        open(<TermsPage formUrl={formUrl} />)
    }

    const goPrivacy = async () => {
        await close()
        open(<PrivacyPolicyPage formUrl={formUrl} />)
    }

    return (
        <div>
            <div
                css={css`
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    height: 24rem;
                    gap: 9rem;
                    cursor: pointer;
                `}
                onClick={handleClick}
            >
                <div
                    css={css`
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 18rem;
                        height: 18rem;
                    `}
                >
                    <Svg
                        css={css`
                            width: auto;
                            height: 100%;
                        `}
                        src={checked ? "login_page_v2/checked.svg" : "login_page_v2/unchecked.svg"}
                    />
                </div>
                <div
                    css={css`
                        display: flex;
                        flex-direction: row;
                        gap: 4rem;
                        align-items: center;
                    `}
                >
                    <span>I agree to the</span>
                    <HintLink
                        onClick={(ev) => {
                            if (match_LOGIN) {
                                ev.preventDefault();
                            }
                            ev.stopPropagation()
                            goTerms()
                        }}
                        to={""}
                    >
                        Terms of Use
                    </HintLink>
                    <span>and</span>
                    <HintLink
                        onClick={(ev) => {
                            if (match_LOGIN) {
                                ev.preventDefault();
                            }
                            ev.stopPropagation()
                            goPrivacy()
                        }}
                        to={""}
                    >
                        Privacy Policy
                    </HintLink>
                </div>
            </div>
            <motion.div
                initial={{
                    opacity: 0,
                }}
                animate={{
                    opacity: agreeTermsHintShow ? 1 : 0,
                }}
                css={css`
                    display: flex;
                    flex-direction: row;
                    gap: 8rem;
                    align-items: center;
                    background: #0e0f1be5;
                    color: #ffffffbf;
                    font-family: Gilroy;
                    font-weight: 400;
                    font-size: 12rem;
                    line-height: 16rem;
                    letter-spacing: 0%;
                    border-radius: 8rem;
                    height: 52rem;
                    padding: 0 12rem;
                    user-select: none;
                    pointer-events: ${agreeTermsHintShow ? "auto" : "none"};
                `}
            >
                <div
                    css={css`
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                    `}
                >
                    You need to agree to the Terms of Use and Privacy Policy to login Filbet.
                </div>
                <button
                    css={css`
                        background: none;
                        border: none;
                        color: #fff;
                        font-size: 12rem;
                        line-height: 16rem;
                        width: 72rem;
                        height: 24rem;
                        border-radius: 12rem;
                        font-family: Gilroy;
                        font-weight: 500;
                        font-size: 12rem;
                        line-height: 16rem;
                        letter-spacing: 0%;
                        text-align: center;
                        background: linear-gradient(180deg, #fb517b 0%, #fb2d60 100%);
                        cursor: pointer;
                    `}
                    onClick={handleClick}
                >
                    I agree
                </button>
            </motion.div>
        </div>
    )
}
